<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />
    <script type="text/javascript" src="../../js/verify.js"></script>
    <script type="text/javascript" src="../../js/common/commonfuntion.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../../css/orderdetail.css" />
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/common/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/alarm.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../../css/mobiscroll.custom.min.css" /> -->

    <style>
        #listdata .title{
            font-family: SourceHanSansCN-Bold;
            font-size: 0.32rem;
            color: #7F94B2;
            letter-spacing: 1px;
            margin-top: 0.6rem;
            font-weight: bold;
        }


        #listdata .layui-upload .layui-table th{
            font-size: 0.24rem !important;
            text-align: center;
            padding: 0 !important;
        }

        #listdata .layui-upload #testList{
            font-size: 0.24rem;
            height: 0.5rem;
            line-height: 0.5rem;
            padding: 0 0.2rem;
        }

        #listdata .layui-upload #testListAction{
            background: red;
            font-size: 0.24rem;
            height: 0.5rem;
            line-height: 0.5rem;
            padding: 0 0.2rem;
        }


        #listdata .layui-upload .layui-table td{
            font-size: 0.24rem !important;
            text-align: center;
            padding: 0 !important;
        }

        #listdata .sub_wrap{
            width:100%;
            height:40px;
            margin:20px 0;
        }

        #listdata .sub_wrap .sub_btn{
            width:80%;
            height:40px;
            line-height:40px;
            margin:auto;
            text-align:center;
            background: #0167FF;
            border-radius: 31px;
            color:#fff;
            font-family: SourceHanSansCN-Regular;
            font-size: 18px;
            color: #FFFFFF;
            letter-spacing: 2.25px;
        }

    </style>

</head>

<body>
    <div id="container" class="alarm">
        <div class="alarm_01">
            <!--主屏内容-->
            <div class="alarm_screen">
                <div class="m_title">
                    <div class="back" id="back">
                        <img src="../../images/back.svg" alt="">
                    </div>
                    <span class="tit" id="showtime"></span>
                </div>
                <div class="m_content">

                    <div class="sb_tit" style="border-bottom:1px dotted #1B3150;height:50px;">
                        <p id="showname" style="float:left;line-height:50px;margin:0;font-size:0.32rem;font-family: SourceHanSansCN-Regular;color: #CDDDF3;letter-spacing: 0;"></p>
                        <!-- <input readonly class="form-control" type="text" id="choseMonth" placeholder="月份搜索" style="float:right;width:30%;margin-top:8px;border:1px solid rgba(1,103,255,0.3);border-radius:20px;background:transparent;color:#0167FF;"> -->
                    </div>



                    <div class="gjdata">
                        <div class="data_wrap" id="listdata">
                            <!-- <a href="./order/orderdetail_gj.html" class="datalista">
                                <span class="dataleft">01021</span>
                                <span class="dataright">
                                    <span class="dataleft">工单巡检</span>
                                    <span class="readyaccept">待填报</span>
                                    <span class="dataicon">
                                        <img src="./images/arrowsr.svg" alt="" />
                                    </span>
                                </span>
                            </a>
                            <a href="order/orderdetail_fj.html" class="datalista">
                                <span class="dataleft">01022</span>
                                <span class="dataright">
                                    <span class="dataleft">运维工单</span>
                                    <span class="alreadydone">已完成</span>
                                    <span class="dataicon">
                                        <img src="./images/arrowsr.svg" alt="" />
                                    </span>
                                </span>
                            </a>
                            <a href="" class="datalista">
                                <span class="dataleft">01023</span>
                                <span class="dataright">
                                    <span class="dataleft">系统运维</span>
                                    <span class="bedoing">进行中</span>
                                    <span class="dataicon">
                                        <img src="./images/arrowsr.svg" alt="" />
                                    </span>
                                </span>
                            </a> -->

                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize =
                "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <!-- js -->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script>
        $(document).ready(function () {
            var uploadfile = [];

            layui.use('upload', function(){
                var $ = layui.jquery,upload = layui.upload;
                var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                    elem: '#testList'
                    ,url: 'http://112.74.169.99:21021/api/FileUpload/GatherImageUploadPost' //改成您自己的上传接口
                    ,accept: 'file'
                    ,multiple: true
                    ,auto: false
                    ,bindAction: '#testListAction'
                    ,choose: function(obj){
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                                ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                        });
                    }
                    ,done: function(res, index, upload){
                        if(res.result.fileurl){ //上传成功

                            var filename = [];
                            for(var x in res.result){
                                filename.push(res.result[x]);
                            }
                            uploadfile.push(filename)
                            var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html(''); //清空操作
                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                        }
                        this.error(index, upload);
                    }
                    ,error: function(index, upload){
                        var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                });

            });

            var projectID = GetQueryString('projectID');
            var projectName = GetQueryString('projectName');
            var projecttime = GetQueryString('projecttime');
            var inspectionOrderID = GetQueryString('inspectionOrderID');
            $("#showtime").html(projecttime);
            $("#showname").html(projectName);

            $("#listdata").html(` `);
            $("#listdata").html( eachdata() );


            // 返回按钮
            $("#back").click(function(){
                layer.confirm('确定要返回吗？', {
                    btn: ['确定','取消']
                }, function(){
                    window.location.href = "../project_loglist.html?projectid=" +projectID +"&projectname=" + projectName;
                });
            });


            // 提交按钮
            $('#sub_btn').click(function(){
                console.log(uploadfile);
                return;
                var devices0 = window.localStorage.getItem('devices0'),
                    devices1 = window.localStorage.getItem('devices1'),
                    devices2 = window.localStorage.getItem('devices2'),
                    devices3 = window.localStorage.getItem('devices3'),
                    devices4 = window.localStorage.getItem('devices4'),
                    devices5 = window.localStorage.getItem('devices5'),
                    devices6 = window.localStorage.getItem('devices6'),
                    devices7 = window.localStorage.getItem('devices7'),
                    devices8 = window.localStorage.getItem('devices8'),
                    devices9 = window.localStorage.getItem('devices9');
                    devices10 = window.localStorage.getItem('devices10');

                if(devices0&&devices2&&devices3&&devices4&&devices5&&devices6&&devices7&&devices8&&devices9&&devices10){

                    var UserID = window.localStorage.getItem('id')
                    var Contant = JSON.stringify({
                        "devices0": devices0,
                        "devices1": devices1,
                        "devices2": devices2,
                        "devices3": devices3,
                        "devices4": devices4,
                        "devices5": devices5,
                        "devices6": devices6,
                        "devices7": devices7,
                        "devices8": devices8,
                        "devices9": devices9,
                        "devices10": devices10,
                        "uploadfile": uploadfile
                    });

                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth()+1;
                    var day = date.getDate() >= 10? date.getDate():'0'+date.getDate();
                    var hour = date.getHours() >= 10? date.getHours():'0'+date.getHours();
                    var minute = date.getMinutes() >= 10? date.getMinutes():'0'+date.getMinutes();
                    var second = date.getSeconds() >= 10? date.getSeconds():'0'+date.getSeconds();


                    var CreatTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
                    var LogTime = projecttime + " 00:00:00";

                    var subdata = {
                        userID: UserID,
                        projectID: projectID,
                        contant: Contant,
                        creatTime: CreatTime,
                        logTime: LogTime,
                        remark1: window.localStorage.getItem('name'),
                        remark2:'',
                        remark3:''
                    }

                    subdata = JSON.stringify(subdata);

                    $.ajax({
                        url: "http://112.74.169.99:21021/api/services/app/DevOpsService/CreatInspectionOrder",
                        data: subdata,
                        type: "post",
                        dataType: "json",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Content-Type", "application/json");
                            xhr.setRequestHeader(
                                "Accept",
                                "application/json, text/plain, */*"
                            );
                        },
                        success: function (res) {
                            // console.log(res);
                            console.log("请求成功");
                            $("#sub_btn").html(' ');
                            $("#sub_btn").html('提交成功');
                            layer.msg('提交成功', {
                                icon: 1,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                window.location.href = "../project_loglist.html?projectid=" +projectID +"&projectname=" + projectName;
                            })
                            
                        },
                        error: function (err) {
                            console.log("请求失败");
                            $("#sub_btn").html(' ');
                            $("#sub_btn").html('提 交');
                        }
                    });

                }else{
                    layer.msg('请进入设备页完善信息', {
                        icon: 2,
                        time: 1500 //1秒关闭（如果不配置，默认是3秒）
                    })
                }

            });

            var devicesindex
            // 遍历数据
            function eachdata() {

                var str = '';
                for(var j=0;j<11;j++){

                    str += `<a href="` + `./device_detail.html?projectID=` + projectID;
                        if(j==0){
                            str += `&name=柴油机&storage=devices0` + `" class="datalista"><span class="dataleft">柴油机</span><span class="dataright">`;
                        }else if(j==1){
                            str += `&name=储能系统(含PCS)&storage=devices1` + `" class="datalista"><span class="dataleft">储能系统(含PCS)</span><span class="dataright">`;
                        }else if(j==2){
                            str += `&name=智能配电柜(内部)&storage=devices2` + `" class="datalista"><span class="dataleft">智能配电柜(内部)</span><span class="dataright">`;
                        }else if(j==3){
                            str += `&name=智能配电柜(外部)&storage=devices3` + `" class="datalista"><span class="dataleft">智能配电柜(外部)</span><span class="dataright">`;
                        }else if(j==4){
                            str += `&name=智能控制柜(EMS)&storage=devices4` + `" class="datalista"><span class="dataleft">智能控制柜(EMS)</span><span class="dataright">`;
                        }else if(j==5){
                            str += `&name=集装箱&storage=devices5` + `" class="datalista"><span class="dataleft">集装箱</span><span class="dataright">`;
                        }else if(j==6){
                            str += `&name=外部电缆&storage=devices6` + `" class="datalista"><span class="dataleft">外部电缆</span><span class="dataright">`;
                        }else if(j==7){
                            str += `&name=油箱及配套设施&storage=devices7` + `" class="datalista"><span class="dataleft">油箱及配套设施</span><span class="dataright">`;
                        }else if(j==8){
                            str += `&name=视频监控&storage=devices8` + `" class="datalista"><span class="dataleft">视频监控</span><span class="dataright">`;
                        }else if(j==9){
                            str += `&name=变压器及其他&storage=devices9` + `" class="datalista"><span class="dataleft">变压器及其他</span><span class="dataright">`;
                        }else if(j==10){
                            str += `&name=全站场地&storage=devices10` + `" class="datalista"><span class="dataleft">全站场地</span><span class="dataright">`;
                        }

                        devicesindex = "devices" + j;
                        var devicescon = window.localStorage.getItem(devicesindex);
                        if( devicescon){
                            var objcon = JSON.parse(devicescon);
                            if(objcon.applyto == 'yes'){
                                str += `<span class="alreadydone">适用</span>`;
                                if(objcon.normalto == 'yes'){
                                    str += `<span class="alreadydone">正常</span>`;
                                }else if(objcon.normalto == 'no'){
                                    str += `<span class="readyaccept">不正常</span>`;
                                }
                            }else if(objcon.applyto == 'no'){
                                str += `<span class="readyaccept">不适用</span>`;
                            }
                        }

                        str += `<span class="dataicon"><img src="../../images/arrowsr.svg" alt="" /></span></span></a>`;
                }

                str += `<div class="hdnr_tit title">上传附件</div>
                        <div class="layui-upload" style="margin-top:0.4rem;">
                            <div class="layui-upload-list">
                                <table class="layui-table">
                                    <thead>
                                        <tr>
                                            <th>文件名</th>
                                            <th>大小</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="demoList"></tbody>
                                </table>
                            </div>

                            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                            <button type="button" class="layui-btn" id="testListAction" style="font-size:0.24rem;">开始上传</button>

                        </div>`;

                str += `<div class="sub_wrap">
                            <p class="sub_btn" id="sub_btn">提 交</p>
                        </div>`;
                return str;

            }
        });
        
    </script>

</body>

</html>